97.6% of websites around the world use JavaScript. As great as this may be, websites that heavily rely on JS have high Time to interact scores (TTI)causing slower page loads and performance. So what do we do, sacrifice the complex features that make our web pages nicer and more interactive, or turn a deaf ear to TTI? Luckily Astro JS comes to our rescue.
What is Astro JS❓
Well, Astro JS is a newly developed multipage, all-in-one web framework that focuses on fast content-driven websites. It boasts of Zero JavaScript for static websites and only ships JavaScript when necessary.
If you're new to this concept, the question on your mind might be "what sorcery is this"
- To achieve this feat, Astro uses component islands. This is a shift from the regular front-end architecture. It extracts the UI into smaller isolated components. Any unused JS is replaced with HTML making it static and lightweight.
- This is based on a concept known as partial hydration
- It works great for static output or server output required on demand and works well with a filesystem, CMS like Storyblok as well as databases and APIs
- An impressive feature of Astro is that it integrates easily with front-end frameworks like alpine JS, lit, Preact, React, Solid JS, svelte, and Vue JS
- And as if this wasn't enough, it is made edge ready and hence can be integrated with SSR() adapters like Cloudflare, Vercel, Node JS, Deno, and Netlify ( I hope to see Bun JS getting in on the action soon).
Core Features ⚙️
- Component Islands
- Server-first API
- Zero JavaScript
- Edge ready
- Highly customizable
- UI- agnostic (meaning it is interoperable with a lot of UI frameworks)
Astro promises to be an all-in-one web framework. This is becoming more of a cliché with web frameworks and I'm honestly getting fed up howeverI think Astro might actually be the real deal and hopefully, my hopes will not be shattered.
Thank you for reading.
An explanation on Partial hydration can be found here in case it wasn't clear to you Getting started with Astro is simple just run npm create astro@latest in your terminal to get started. You can follow this tutorial to build a simple project